import { useEffect, useContext } from 'react';
import { useNavigate } from '@reach/router';

import Dialog from 'elementor-app/ui/dialog/dialog';

import useQueryParams from 'elementor-app/hooks/use-query-params';
import useAction from 'elementor-app/hooks/use-action';
import InlineLink from 'elementor-app/ui/molecules/inline-link';
import { KIT_SOURCE_MAP } from '../../hooks/use-kit';
import safeRedirect from '../utils/redirect';
import { SharedContext } from '../../context/shared-context/shared-context-provider';

const messagesContent = {
	general: {
		title: __( 'Unable to download the Website Template', 'elementor' ),
		text: <>
			{ __( 'We couldn’t download the Website Template due to technical difficulties on our part. Try again and if the problem persists contact ', 'elementor' ) }
			<InlineLink url="https://my.elementor.com/support-center/">
				{ __( 'Support', 'elementor' ) }
			</InlineLink>
		</>,
	},
	'zip-archive-module-missing': {
		title: __( 'Couldn’t handle the Website Template', 'elementor' ),
		text: __( 'Seems like your server is missing the PHP zip module. Install it on your server or contact your site host for further instructions.', 'elementor' ),
	},
	'invalid-zip-file': {
		title: __( 'Couldn’t use the .zip file', 'elementor' ),
		text: <>
			{ __( 'Seems like there is a problem with the zip’s files. Try installing again and if the problem persists contact ', 'elementor' ) }
			<InlineLink url="https://my.elementor.com/support-center/">
				{ __( 'Support', 'elementor' ) }
			</InlineLink>
		</>,
	},
	timeout: {
		title: __( 'Unable to download the Website Template', 'elementor' ),
		text: <>
			{ __( 'It took too much time to download your Website Template and we were unable to complete the process. If all the Website Template’s parts don’t appear in ', 'elementor' ) }
			<InlineLink url={ elementorAppConfig.pages_url } >
				{ __( 'Pages', 'elementor' ) }
			</InlineLink>
			{ __( ', try again and if the problem persists contact ', 'elementor' ) }
			<InlineLink url="https://my.elementor.com/support-center/">
				{ __( 'Support', 'elementor' ) }
			</InlineLink>
		</>,
	},
	'invalid-kit-library-zip-error': {
		title: __( 'Unable to download the Website Template', 'elementor' ),
		text: <>
			{ __( 'We couldn’t download the Website Template due to technical difficulty on our part. Try again in a few minutes and if the problem persists contact ', 'elementor' ) }
			<InlineLink url="https://my.elementor.com/support-center/">
				{ __( 'Support', 'elementor' ) }
			</InlineLink>
		</>,
	},
	'no-write-permissions': {
		title: __( 'Couldn’t access the file', 'elementor' ),
		text: __( 'Seems like Elementor isn’t authorized to access relevant files for installing this Website Template. Contact your site host to get permission.', 'elementor' ),
	},
	'plugin-installation-permissions-error': {
		title: __( 'Couldn’t install the Website Template', 'elementor' ),
		text: __( 'The Website Template includes plugins you don’t have permission to install. Contact your site admin to change your permissions.', 'elementor' ),
	},
	'third-party-error': {
		title: __( 'Unable to download the Website Template', 'elementor' ),
		text: __( 'This is due to a conflict with one or more third-party plugins already active on your site. Try disabling them, and then give the download another go.', 'elementor' ),
	},
	'domdocument-missing': {
		title: __( 'Unable to download the Website Template', 'elementor' ),
		text: __( 'This download requires the \'DOMDocument\' PHP extension, which we couldn’t detect on your server. Enable this extension, or get in touch with your hosting service for support, and then give the download another go.', 'elementor' ),
	},
	'insufficient-quota': {
		title: __( 'Couldn’t Export the Website Template', 'elementor' ),
		text: __( 'The export failed because it will pass the maximum Website Templates you can export.', 'elementor' ),
	},
	'failed-to-fetch-quota': {
		title: __( 'Couldn’t fetch quota', 'elementor' ),
		text: __( 'Failed to fetch quota.', 'elementor' ),
	},
	'insufficient-storage-quota': {
		title: __( 'Couldn’t Export the Website Template', 'elementor' ),
		text: __( 'The export failed because it will pass the maximum Website Templates storage you have available.', 'elementor' ),
	},
};

export default function ProcessFailedDialog( { errorType, onApprove, onDismiss, approveButton, dismissButton, onModalClose, onError, onLearnMore } ) {
	const action = useAction(),
		sharedContext = useContext( SharedContext ),
		{ returnTo } = sharedContext.data || {},
		navigate = useNavigate(),
		{ referrer, source } = useQueryParams().getAll(),
		error = 'string' === typeof errorType && messagesContent[ errorType ] ? errorType : 'general',
		{ title, text } = messagesContent[ error ],
		tryAgainText = __( 'Try Again', 'elementor' ),
		isTryAgainAction = 'general' === error && onApprove,
		handleOnApprove = () => {
			/*
			* When the errorType is general, there should be an option to trigger the onApprove function.
			* All other error messages should open the learn-more link.
			*/
			if ( isTryAgainAction ) {
				onApprove();
			} else {
				window.open( 'https://go.elementor.com/app-import-download-failed', '_blank' );
			}
			onLearnMore?.();
		},
		handleOnDismiss = ( event ) => {
			const isLoadingKitFromCloud = KIT_SOURCE_MAP.CLOUD === source;
			if ( returnTo && safeRedirect( returnTo ) ) {
				return;
			}
			if ( 'general' === error && onDismiss ) {
				onDismiss();
			} else if ( 'kit-library' === referrer ) {
				onModalClose?.( event );
				navigate( `/kit-library${ isLoadingKitFromCloud ? '/cloud' : '' }` );
			} else {
				action.backToDashboard();
			}
		};

	useEffect( () => {
		onError?.();
	}, [] );

	return (
		<Dialog
			title={ title }
			text={ text }
			approveButtonColor="link"
			approveButtonText={ isTryAgainAction ? tryAgainText : approveButton }
			approveButtonOnClick={ handleOnApprove }
			dismissButtonText={ dismissButton }
			dismissButtonOnClick={ ( event ) => handleOnDismiss( event ) }
			onClose={ handleOnDismiss }
		/>
	);
}

ProcessFailedDialog.propTypes = {
	onApprove: PropTypes.func,
	onDismiss: PropTypes.func,
	errorType: PropTypes.string,
	approveButton: PropTypes.string,
	dismissButton: PropTypes.string,
	onModalClose: PropTypes.func,
	onError: PropTypes.func,
	onLearnMore: PropTypes.func,
};

ProcessFailedDialog.defaultProps = {
	errorType: 'general',
	approveButton: __( 'Learn More', 'elementor' ),
	dismissButton: __( 'Close', 'elementor' ),
};
